<template>
  <div class="animation-demo">
    <h2 class="section-title">CSS Transition 动画</h2>
    <p class="section-intro">
      CSS Transition 和 Animation 为网页提供了丰富的动画效果，让用户界面更加生动和富有交互性。
    </p>

    <div class="demo-grid">
      <!-- Transition 基础 -->
      <div class="demo-card">
        <h3>Transition 基础语法</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* Transition 基础语法 */
.element {
  /* 要过渡的属性 */
  transition-property: all; /* all | none | property-name */
  /* 过渡时间 */
  transition-duration: 0.3s;
  /* 过渡函数 */
  transition-timing-function: ease; /* ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() */
  /* 延迟时间 */
  transition-delay: 0s;
  
  /* 简写语法 */
  transition: all 0.3s ease 0s;
  /* 或 */
  transition: width 0.3s, height 0.5s ease-in-out;
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="transition-controls">
              <div class="control-group">
                <label>Duration (秒):</label>
                <input
                  type="range"
                  v-model="transitionSettings.duration"
                  min="0.1"
                  max="3"
                  step="0.1"
                />
                <span>{{ transitionSettings.duration }}s</span>
              </div>
              <div class="control-group">
                <label>Timing Function:</label>
                <select v-model="transitionSettings.timing">
                  <option value="ease">ease</option>
                  <option value="linear">linear</option>
                  <option value="ease-in">ease-in</option>
                  <option value="ease-out">ease-out</option>
                  <option value="ease-in-out">ease-in-out</option>
                  <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">
                    cubic-bezier (bounce)
                  </option>
                </select>
              </div>
              <div class="control-group">
                <label>Delay (秒):</label>
                <input type="range" v-model="transitionSettings.delay" min="0" max="2" step="0.1" />
                <span>{{ transitionSettings.delay }}s</span>
              </div>
            </div>
            <div class="transition-demo-area">
              <div
                class="transition-box"
                :class="{ active: transitionActive }"
                :style="{
                  transition: `all ${transitionSettings.duration}s ${transitionSettings.timing} ${transitionSettings.delay}s`,
                }"
                @click="transitionActive = !transitionActive"
              >
                点击我
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 常用过渡属性 -->
      <div class="demo-card">
        <h3>常用过渡属性</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 常用的可过渡属性 */
.transitions {
  /* 尺寸 */
  width: 100px;
  height: 100px;
  
  /* 位置 */
  transform: translateX(0);
  
  /* 颜色 */
  background-color: blue;
  color: white;
  border-color: blue;
  
  /* 透明度 */
  opacity: 1;
  
  /* 阴影 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="property-demos">
              <div class="property-item">
                <h4>尺寸变化</h4>
                <div
                  class="size-demo"
                  :class="{ active: sizeActive }"
                  @click="sizeActive = !sizeActive"
                >
                  Size
                </div>
              </div>
              <div class="property-item">
                <h4>位置变化</h4>
                <div
                  class="position-demo"
                  :class="{ active: positionActive }"
                  @click="positionActive = !positionActive"
                >
                  Position
                </div>
              </div>
              <div class="property-item">
                <h4>颜色变化</h4>
                <div
                  class="color-demo"
                  :class="{ active: colorActive }"
                  @click="colorActive = !colorActive"
                >
                  Color
                </div>
              </div>
              <div class="property-item">
                <h4>透明度变化</h4>
                <div
                  class="opacity-demo"
                  :class="{ active: opacityActive }"
                  @click="opacityActive = !opacityActive"
                >
                  Opacity
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- CSS Animation -->
      <div class="demo-card">
        <h3>CSS Animation 关键帧动画</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 定义关键帧 */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 应用动画 */
.animated {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1; /* infinite */
  animation-direction: normal; /* reverse | alternate | alternate-reverse */
  animation-fill-mode: forwards; /* none | backwards | both */
  
  /* 简写 */
  animation: slideIn 1s ease-out forwards;
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="animation-controls">
              <div class="control-group">
                <label>Animation:</label>
                <select v-model="selectedAnimation">
                  <option value="slideIn">slideIn</option>
                  <option value="fadeIn">fadeIn</option>
                  <option value="bounce">bounce</option>
                  <option value="rotate">rotate</option>
                  <option value="pulse">pulse</option>
                  <option value="shake">shake</option>
                </select>
              </div>
              <div class="control-group">
                <label>Duration:</label>
                <select v-model="animationDuration">
                  <option value="0.5s">0.5s</option>
                  <option value="1s">1s</option>
                  <option value="2s">2s</option>
                  <option value="3s">3s</option>
                </select>
              </div>
              <div class="control-group">
                <label>Iteration:</label>
                <select v-model="animationIteration">
                  <option value="1">1</option>
                  <option value="3">3</option>
                  <option value="infinite">infinite</option>
                </select>
              </div>
            </div>
            <div class="animation-demo-area">
              <div
                class="animation-box"
                :class="{
                  'animate-slideIn': selectedAnimation === 'slideIn' && animationPlaying,
                  'animate-fadeIn': selectedAnimation === 'fadeIn' && animationPlaying,
                  'animate-bounce': selectedAnimation === 'bounce' && animationPlaying,
                  'animate-rotate': selectedAnimation === 'rotate' && animationPlaying,
                  'animate-pulse': selectedAnimation === 'pulse' && animationPlaying,
                  'animate-shake': selectedAnimation === 'shake' && animationPlaying,
                }"
                :style="{
                  animationDuration: animationDuration,
                  animationIterationCount: animationIteration,
                }"
              >
                Animation Box
              </div>
              <button @click="playAnimation" class="play-btn">播放动画</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 缓动函数 -->
      <div class="demo-card">
        <h3>缓动函数对比</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 内置缓动函数 */
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

/* 自定义贝塞尔曲线 */
.custom { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* 阶跃函数 */
.steps { transition-timing-function: steps(5, end); }</code></pre>
          </div>
          <div class="demo-result">
            <div class="easing-demo">
              <button @click="startEasingDemo" class="easing-btn">开始对比</button>
              <div class="easing-tracks">
                <div class="easing-track">
                  <span class="easing-label">ease</span>
                  <div class="easing-ball ease" :class="{ moving: easingActive }"></div>
                </div>
                <div class="easing-track">
                  <span class="easing-label">linear</span>
                  <div class="easing-ball linear" :class="{ moving: easingActive }"></div>
                </div>
                <div class="easing-track">
                  <span class="easing-label">ease-in</span>
                  <div class="easing-ball ease-in" :class="{ moving: easingActive }"></div>
                </div>
                <div class="easing-track">
                  <span class="easing-label">ease-out</span>
                  <div class="easing-ball ease-out" :class="{ moving: easingActive }"></div>
                </div>
                <div class="easing-track">
                  <span class="easing-label">ease-in-out</span>
                  <div class="easing-ball ease-in-out" :class="{ moving: easingActive }"></div>
                </div>
                <div class="easing-track">
                  <span class="easing-label">bounce</span>
                  <div class="easing-ball bounce" :class="{ moving: easingActive }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 实用动画效果 -->
      <div class="demo-card">
        <h3>实用动画效果</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 悬停效果 */
.hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 加载动画 */
.loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 按钮点击效果 */
.button-click:active {
  transform: scale(0.95);
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="practical-effects">
              <div class="effect-item">
                <h4>悬停效果</h4>
                <div class="hover-card">悬停我</div>
              </div>
              <div class="effect-item">
                <h4>加载动画</h4>
                <div class="loading-spinner"></div>
              </div>
              <div class="effect-item">
                <h4>按钮效果</h4>
                <button class="interactive-btn">点击我</button>
              </div>
              <div class="effect-item">
                <h4>进入动画</h4>
                <button @click="showModal = true">显示模态框</button>
                <div v-if="showModal" class="modal-overlay" @click="showModal = false">
                  <div class="modal-content" @click.stop>
                    <h4>动画模态框</h4>
                    <p>带有进入和退出动画</p>
                    <button @click="showModal = false">关闭</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 性能优化 -->
      <div class="demo-card">
        <h3>动画性能优化</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 性能优化技巧 */

/* 1. 使用 transform 和 opacity */
/* 好：只触发合成 */
.good {
  transform: translateX(100px);
  opacity: 0.5;
}

/* 不好：触发重排/重绘 */
.bad {
  left: 100px;
  background-color: red;
}

/* 2. 使用 will-change 提示浏览器 */
.will-animate {
  will-change: transform, opacity;
}

/* 3. 使用 GPU 加速 */
.gpu-accelerated {
  transform: translateZ(0); /* 或 translate3d(0,0,0) */
}

/* 4. 避免动画期间的复杂选择器 */
/* 动画结束后移除 will-change */</code></pre>
          </div>
          <div class="demo-result">
            <div class="performance-demo">
              <div class="performance-comparison">
                <div class="comparison-item">
                  <h4>低性能动画 (left/top)</h4>
                  <div
                    class="bad-animation"
                    :class="{ active: badAnimationActive }"
                    @click="badAnimationActive = !badAnimationActive"
                  >
                    Low Performance
                  </div>
                </div>
                <div class="comparison-item">
                  <h4>高性能动画 (transform)</h4>
                  <div
                    class="good-animation"
                    :class="{ active: goodAnimationActive }"
                    @click="goodAnimationActive = !goodAnimationActive"
                  >
                    High Performance
                  </div>
                </div>
              </div>
              <div class="performance-tips">
                <h4>性能优化建议：</h4>
                <ul>
                  <li>优先使用 transform 和 opacity</li>
                  <li>避免动画 width、height、padding 等布局属性</li>
                  <li>使用 will-change 预告浏览器</li>
                  <li>动画结束后移除 will-change</li>
                  <li>使用 requestAnimationFrame 进行 JS 动画</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="animation-tips">
      <h3>动画设计最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>⚡ 性能优先</h4>
          <ul>
            <li>使用 transform 和 opacity</li>
            <li>避免触发重排和重绘</li>
            <li>合理使用 GPU 加速</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>🎯 用户体验</h4>
          <ul>
            <li>动画时长控制在 200-500ms</li>
            <li>提供动画开关选项</li>
            <li>遵循材料设计动画原则</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>🎨 视觉效果</h4>
          <ul>
            <li>选择合适的缓动函数</li>
            <li>保持动画的一致性</li>
            <li>避免过度动画</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>🔧 技术实现</h4>
          <ul>
            <li>CSS 动画优于 JS 动画</li>
            <li>使用 prefers-reduced-motion</li>
            <li>测试不同设备的性能</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const transitionSettings = ref({
  duration: 0.3,
  timing: 'ease',
  delay: 0,
})

const transitionActive = ref(false)
const sizeActive = ref(false)
const positionActive = ref(false)
const colorActive = ref(false)
const opacityActive = ref(false)

const selectedAnimation = ref('slideIn')
const animationDuration = ref('1s')
const animationIteration = ref('1')
const animationPlaying = ref(false)

const easingActive = ref(false)
const showModal = ref(false)
const badAnimationActive = ref(false)
const goodAnimationActive = ref(false)

const playAnimation = () => {
  animationPlaying.value = false
  setTimeout(() => {
    animationPlaying.value = true
  }, 50)
}

const startEasingDemo = () => {
  easingActive.value = false
  setTimeout(() => {
    easingActive.value = true
  }, 50)
}
</script>

<style scoped lang="scss">
.animation-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #e91e63;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #e91e63;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .animation-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #fce4ec;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #e91e63;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #ad1457;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// 控制面板样式
.transition-controls,
.animation-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;

  .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    label {
      font-weight: 500;
      font-size: 0.9rem;
    }

    input,
    select {
      padding: 6px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    input[type='range'] {
      flex: 1;
    }

    span {
      font-size: 0.9rem;
      color: #666;
    }
  }
}

// Transition 演示
.transition-demo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px dashed #ddd;

  .transition-box {
    width: 100px;
    height: 100px;
    background: #e91e63;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transform: scale(1);

    &.active {
      transform: scale(1.2) rotate(45deg);
      background: #4caf50;
      border-radius: 50%;
    }
  }
}

// 属性演示
.property-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;

  .property-item {
    text-align: center;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #333;
      font-size: 0.9rem;
    }
  }
}

.size-demo {
  width: 60px;
  height: 60px;
  background: #2196f3;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;

  &.active {
    width: 80px;
    height: 80px;
  }
}

.position-demo {
  width: 60px;
  height: 60px;
  background: #ff9800;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: 0 auto;

  &.active {
    transform: translateX(20px);
  }
}

.color-demo {
  width: 60px;
  height: 60px;
  background: #4caf50;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 0 auto;

  &.active {
    background: #e91e63;
  }
}

.opacity-demo {
  width: 60px;
  height: 60px;
  background: #9c27b0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
  margin: 0 auto;

  &.active {
    opacity: 0.3;
  }
}

// Animation 演示
.animation-demo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 150px;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px dashed #ddd;
  padding: 1rem;

  .animation-box {
    width: 100px;
    height: 100px;
    background: #e91e63;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    text-align: center;
    font-size: 0.9rem;
  }

  .play-btn {
    padding: 8px 16px;
    background: #e91e63;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;

    &:hover {
      background: #ad1457;
    }
  }
}

// 动画关键帧
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

.animate-slideIn {
  animation-name: slideIn;
}
.animate-fadeIn {
  animation-name: fadeIn;
}
.animate-bounce {
  animation-name: bounce;
}
.animate-rotate {
  animation-name: rotate;
}
.animate-pulse {
  animation-name: pulse;
}
.animate-shake {
  animation-name: shake;
}

// 缓动函数演示
.easing-demo {
  .easing-btn {
    padding: 8px 16px;
    background: #2196f3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1rem;

    &:hover {
      background: #1976d2;
    }
  }

  .easing-tracks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .easing-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;

    .easing-label {
      min-width: 100px;
      font-size: 0.9rem;
      font-weight: 500;
    }

    .easing-ball {
      width: 20px;
      height: 20px;
      background: #e91e63;
      border-radius: 50%;
      transition: transform 2s;

      &.moving {
        transform: translateX(200px);
      }

      &.ease {
        transition-timing-function: ease;
      }
      &.linear {
        transition-timing-function: linear;
      }
      &.ease-in {
        transition-timing-function: ease-in;
      }
      &.ease-out {
        transition-timing-function: ease-out;
      }
      &.ease-in-out {
        transition-timing-function: ease-in-out;
      }
      &.bounce {
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
  }
}

// 实用效果
.practical-effects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;

  .effect-item {
    text-align: center;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
      font-size: 1rem;
    }
  }
}

.hover-card {
  width: 120px;
  height: 80px;
  background: #2196f3;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(33, 150, 243, 0.3);
  }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #e91e63;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.interactive-btn {
  padding: 12px 24px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.1s ease;

  &:hover {
    background: #45a049;
    transform: translateY(-1px);
  }

  &:active {
    transform: scale(0.95);
  }
}

// 模态框动画
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;

  .modal-content {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 300px;
    text-align: center;
    animation: slideIn 0.3s ease;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
    }

    p {
      margin: 0 0 1rem 0;
      color: #666;
    }

    button {
      padding: 8px 16px;
      background: #e91e63;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #ad1457;
      }
    }
  }
}

// 性能对比
.performance-demo {
  .performance-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;

    .comparison-item {
      text-align: center;

      h4 {
        margin: 0 0 1rem 0;
        color: #333;
        font-size: 1rem;
      }
    }
  }

  .performance-tips {
    background: #fff3e0;
    border-radius: 6px;
    padding: 1rem;
    border-left: 4px solid #ff9800;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #f57c00;
    }

    ul {
      margin: 0;
      padding-left: 1.5rem;

      li {
        margin-bottom: 0.25rem;
        color: #666;
        font-size: 0.9rem;
      }
    }
  }
}

.bad-animation {
  width: 100px;
  height: 60px;
  background: #f44336;
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: left 0.5s ease;
  position: relative;
  left: 0;
  margin: 0 auto;
  font-size: 0.9rem;
  text-align: center;

  &.active {
    left: 50px;
  }
}

.good-animation {
  width: 100px;
  height: 60px;
  background: #4caf50;
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.5s ease;
  margin: 0 auto;
  font-size: 0.9rem;
  text-align: center;

  &.active {
    transform: translateX(50px);
  }
}
</style>
